<template>
  <div class="bg">
    <div class="loginContent">
      <div class="topTitle">
        <span class="sizeTitle">茗卓MES生产管理系统</span>
        <div class="smallTitle"><span>Vision 1.0.0.20190404.Base</span></div>
      </div>
      <div class="centre">
        <el-form :model="ruleForm" :rules="rules" class="demo-ruleForm" label-width="70px" ref="ruleForm">
          <el-form-item label="用户名：" prop="username">
            <el-input placeholder="请输入用户名：员工号" v-model="ruleForm.username"></el-input>
          </el-form-item>
          <div class="namePass"><span style="margin-right:15px">密</span><span>码：</span></div>
          <el-form-item prop="passWord">
            <el-input @keyup.enter.native="enter" placeholder="请输入密码：123456" type="password"
                      v-model="ruleForm.passWord"></el-input>
          </el-form-item>
        </el-form>
        <div class="check">
          <div>
            <el-checkbox v-model="checked">记住密码</el-checkbox>
          </div>
          <div class="sizepass">忘记密码</div>
        </div>
      </div>
      <el-button @click="enter" class="btn" type="primary">登 录</el-button>
    </div>
  </div>
</template>

<script>
  import { validateUserName, validatePass } from './login'
  import { encrypt } from '@/api/user'
  import { all } from 'q'

  export default {
    name: 'Login',
    data() {
      return {
        ruleForm: {
          username: '', // 账号
          passWord: '', // 密码
          cipher: '' //加密的密码
        },
        checked: false,   //勾选
        change: true,
        rules: {
          username: [
            { validator: validateUserName, trigger: 'blur' }
          ],
          passWord: [
            { validator: validatePass, trigger: 'blur' }
          ]
        }
      }
    },
    methods: {
      enter() {
        encrypt({ inputString: this.ruleForm.passWord }).then((res) => {
          this.ruleForm.cipher = res.Result
          this.$store.dispatch('user/Login', this.ruleForm)
        }).catch((error) => {
          this.$message.warning(error)
        })
      }
    },
    watch: {
      checked(val) {
        if (val == true) {
          localStorage.setItem('info', JSON.stringify({
            userName: this.ruleForm.username,
            passWord: this.ruleForm.passWord
          }))
        } else {
          localStorage.removeItem('info')
        }
      }
    },
    created() {
      if (localStorage.getItem('info') != null) {
        this.checked = true
        this.ruleForm.username = JSON.parse(localStorage.getItem('info')).userName
        this.ruleForm.passWord = JSON.parse(localStorage.getItem('info')).passWord
      }
    }
  }
</script>

<style lang="scss" scoped>

  $bg: #2d3a4b;
  $dark_gray: #889aa4;
  $light_gray: #eee;


  .bg {
    min-height: 100%;
    width: 100%;
    background-color: $bg;
    overflow: hidden;

    /*background-image: url('./img/a.jpg') ;*/
    /*background-repeat: no-repeat;*/
    /*height: 937px;*/
    /*background-size:100% 100%;*/
    /*background-attachment: fixed;*/
    display: flex;
    align-items: center;
    justify-content: center;

    .loginContent {
      width: 500px;
      height: 380px;

      .centre {
        width: 400px;
        height: 160px;
        margin: 35px auto 0;
        position: relative;

        .check {
          width: 330px;
          height: 20px;
          margin-left: 70px;
          display: flex;
          justify-content: space-between;

          .sizepass {
            font-size: 13px;
            line-height: 20px;
            color: #D7D7D7;
          }

          .sizepass:hover {
            color: red;
            cursor: pointer;
          }
        }

        .namePass {
          position: absolute;
          left: 2px;
          top: 66px;
          font-size: 14px;
          color: #606266;
          font-weight: 700;
          cursor: default;
        }
      }

      .topTitle {
        width: 100%;
        height: 60px;
        text-align: center;
        line-height: 60px;
        border-bottom: 1px solid #D7D7D7;
        position: relative;

        .sizeTitle {
          font-size: 25px;
          color: #D7D7D7;
        }

        .smallTitle {
          color: #D7D7D7;
          position: absolute;
          right: -40px;
          top: 15px;
          font-size: 12px;
        }
      }
    }
  }

  .btn {
    width: 330px;
    margin-left: 120px;
    font-size: 16px;
  }
</style>
